<script>
import dayjs from 'dayjs'

export default {
    props:{
        format:{
            type:String,
            default:'YYYY-MM-DD'
        },
        fallback:{
            type:String,
            default:'-'
        },
        isEditing:false
    },
    computed:{
        attrs(){
            const attrs = {...this.$attrs}
            attrs['type'] = 'date'
            return attrs
        },
        listeners(){
            const listeners = { ...this.$listeners }
            return listeners
        },
        valueFormatted(){
            if(!(this.$attrs.value instanceof Date))
                return this.fallback
            
            return dayjs(this.$attrs.value).format(this.format)
        }
    },
    data(){
        return {

        }
    },
}
</script>
<template>
    <el-date-picker
      v-if="isEditing"
      v-bind="attrs"
      v-on="listeners"
    />

    <span v-else>{{ valueFormatted }}</span>
</template>

<style lang="scss">
</style>